<template>
  <div>
 
    <Upload
      ref="upload"
      action="https://upload-z2.qiniup.com"
      type="drag"
      v-show="!key"
      :show-file-list="false"
      :show-upload-list="true"
      :data="qiniuData"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <div style="padding: 40px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>点击或拖拽上传视频</p>
      </div>
    </Upload>
    <div
      class="img"
      v-show="key"
      @mouseover="mouseover"
      @mouseleave="mouseleave"
    >
      <img
        src="https://img12.360buyimg.com/ddimg/jfs/t1/175799/31/13279/16849/60bad069Eb24e18a5/d2d52fd520bb367e.jpg"
      />
      <div class="top" v-show="imgShow" @click="delImg">
        <i class="iconfont icon-icon7"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qiniuData: {
        token: "",
        key: "",
      },
      img: "",
      imgShow: false,
      key: "",
      afterName: "",
      ceshi1: "",
      ceshi2: "",
      videoUrl: "",
      fileName: "",
    };
  },
  props: {
    videoUrl: String,
  },

  watch: {
    clear: function (data) {
      this.$refs.upload.clearFiles();
      this.img = "";
    },
    imgUrl: function (data) {
      this.img = data;
    },
    videoUrl: function (data) {
      this.videoUrl = data;
      // this.key = data;
      // if(this.videoUrl = data){
      //   this.key
      // }
      console.log(this.videoUrl);
      // console.log(this.key);
    },
  },
  mounted() {
    // this.getFilePrefix();
    console.log(this.videoUrl);
    // this.getAccessToken();
  },

  updata() {
    console.log(this.videoUrl);
  },

  methods: {
    aa() {
      console.log(this.key);
    },
    mouseover() {
      this.imgShow = true;
    },
    mouseleave() {
      this.imgShow = false;
    },
    // 删除图片
    delImg() {
      console.log(this.videoUrl);
      console.log(this.key);
      console.log(this.fileName);
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要删除此视频吗？</p>",
        onOk: () => {
          this.$http(
            "/stage/file/deleteFile",
            {
              fileName: this.key,
            },
            "get",
            (res) => {
              console.log(res);
              if (res.data.code == 200) {
                this.img = "";
                this.$refs.upload.clearFiles();
                this.$emit("uploadImg", "");
                if (res.data.data == true) {
                  this.key = null;
                }
              } else {
                this.$Message.error(res.data.msg);
              }
            }
          );
        },
        onCancel: () => {},
      });
    },

    // 获取上传文件的前缀
    getFilePrefix() {
      // debugger;
      console.log(this.afterName);
      this.$http(
        "/stage/file/getFilePrefix",
        {
          museumId: this.$store.state.museumId,
          suffix: this.afterName,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            console.log(res);
            console.log(this.afterName);
            console.log(res.data.data);
            this.qiniuData.key = res.data.data;
            console.log(this.qiniuData);
            this.ceshi1 = 1;
            // debugger;
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    // 获取上传文件token
    getAccessToken() {
      this.$http("/stage/file/getAccessToken", {}, "get", (res) => {
        if (res.data.code == 200) {
          console.log(1);
          this.qiniuData.token = res.data.data;
          this.ceshi2 = 2;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    // 上传验证
    beforeAvatarUpload(file) {
      return new Promise((resolve, reject) => {
        console.log(file.name);
        var fileName = file.name;
        var n = fileName.lastIndexOf(".");
        console.log(n);
        var n1 = fileName.substr(n);
        console.log(n1);
        this.afterName = n1;
        console.log(this.afterName);
        // debugger;

        this.getFilePrefix();
        this.getAccessToken();
        setTimeout(() => {
          if (this.ceshi1 != "" && this.ceshi2 != "") {
            console.log("success");

            resolve();
          } else {
            console.log("no");
            reject();
          }
          const isLt2M = file.size / 1024 / 1024 < 10;
          if (!isLt2M) {
            this.$Message.error("上传视频大小不能超过 10M!");
            location.reload();
          }

          return isLt2M;
        }, 500);
      });
    },
    // 上传完毕
    handleAvatarSuccess(res, file) {
      console.log(file.name);
      this.fileName = file.name;
      console.log(this.qiniuData);
      console.log(res);
      this.img = res.key;
      console.log(res.key);
      this.key = res.key;
      console.log(this.img);
      console.log(this.key);
      this.$emit("uploadvideo", res.key);
    },
  },
};
</script>

<style scoped>
.img {
  width: 100%;
  position: relative;
  cursor: pointer;
}
.img img {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: -10px;
}
.top {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.top i {
  font-size: 34px;
  color: white;
}
.top i:hover {
  opacity: 0.8;
}
</style>

